// 用户轨迹
<template>
  <div>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline userSearch">
      <el-form-item>
        <el-select
          v-model="searchForm.userName"
          @focus="selectFocus"
          @blur="selectBlur"
          filterable
          remote
          reserve-keyword
          placeholder="输入用户名称"
          clearable
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @click.native="selectChange(item)"
          ></el-option>
          <!--  -->
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="时间:">
        <el-date-picker
          v-model="searchForm.dataTime"
          :picker-options="pickerBeginDateBefore"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :clearable="false"
        ></el-date-picker>
      </el-form-item> -->
      <el-form-item>
        <!-- searchForm.userName &&  -->
        <el-button
          type="primary"
          :disabled="searchForm.userName === ''"
          @click="onSubmit"
          class="btnSizeStyle"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <div id="container" :style="{ height: transferHeight + 'px' }"></div>
    <!-- <el-dialog title="测试" :visible.sync="dialogTableVisible" @close="lajis">
      <video width="100%" height="600" controls id="videoss">
        <source src="https://v1.cecdn.yun300.cn/100001_1911295043/%E4%B8%AD%E6%96%87%E5%85%AC%E5%8F%B8%E4%BB%8B%E7%BB%8D%E8%A7%86%E9%A2%91.mp4" type="video/mp4" />
        <source src="movie.ogg" type="video/ogg" />
        您的浏览器不支持 HTML5 video 标签。
      </video>
    </el-dialog>-->
  </div>
</template>
<script>
import { pinT } from '@/utils/allUrl'
// import { endLoading } from '@/utils/loading.js'
const AMap = window.AMap
export default {
  data() {
    return {
      searchForm: {
        userName: '',
        dataTime: '' // 时间
      },
      options: [],
      restaurants: [], // 搜索数组
      loading: false,
      states: [], // 展示搜索结果数组
      state: '',
      // dialogTableVisible: false,
      map: '',
      interTime: null,
      index: 2,
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        }
      },
      selectedUser: {}, // 保存选中用户的信息
      pageIndex: 0,
    }
  },
  created() {
    // 默认当天日期
    const data = new Date()
    const year = data.getFullYear()
    const month = data.getMonth() + 1
    const days = data.getDate()
    const times = `${year}-${month}-${days}`
    this.searchForm.dataTime = [times, times]
  },
  computed: {
    transferHeight: function() {
      // 计算屏幕滚动高度 - nav - 导航栏
      return window.innerHeight - 135
    }
  },
  mounted() {
    this.getUserList() // 渲染用户
    // 渲染地图
    var that = this
    var map = new AMap.Map('container') // 创建地图实例
    // 同时引入工具条插件，比例尺插件和鹰眼插件
    AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation'], function() {
      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      var tool = new AMap.ToolBar({
        position: 'RT',
        offset: new AMap.Pixel(28, 20) // 工具条相对于基点的偏移位置
      })
      map.addControl(tool)
      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      map.addControl(new AMap.Scale())
      // // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      // map.addControl(new AMap.OverView({ isOpen: true }))
      // // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      // map.addControl(new AMap.MapType())
      // // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      // map.addControl(
      //   new AMap.Geolocation({
      //     offset: new AMap.Pixel(0, 80), // 工具条相对于基点的偏移位置
      //   })
      // )
    })
    that.map = map
  },
  methods: {
    // 获取用户
    async getUserList() {
      const params = new URLSearchParams()
      //   params.append('M_', this.bindUserCurrentPage)
      //   params.append('N_', this.bindUserPageSize)
      // params.append('TYPE', 1)
      params.append('TJCX', this.searchForm.userName)
      const { data: res } = await this.$http.post(`${pinT}yonghu/selectYongHu`, params)
      switch (res.code) {
        case '0000':
          res.data.list.forEach(item => {
            var list_item = {
              label: item.zsxm + (item.lxdh === '' ? '' : `(${item.lxdh})`),
              value: item.id,
              data: item
            }
            this.states.push(item.zsxm + (item.lxdh === '' ? '' : `(${item.lxdh})`))
            this.restaurants.push(list_item)
            // }
          })
          break
        default:
          break
      }
    },
    // 查询按钮
    onSubmit() {
      this.map.clearMap() // 清除地图上所有覆盖物
      this.pageIndex = 1
      this.getLocus()
    },
    // 获取焦点
    selectFocus() {
      this.options = []
    },
    // 失去焦点
    selectBlur() {
      // 收缩展板
    },
    // 值改变
    selectChange(item) {
      this.selectedUser = item.data
      console.log(item)
    },
    // 远程搜索框
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.restaurants.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    },
    // 地图初始化-渲染用户轨迹
    initAMap(lineArr) {
      var that = this
      // var graspRoad
      var polyline = new AMap.Polyline({
        path: lineArr,
        showDir: true,
        // strokeColor: '#28F', // 线颜色
        strokeColor: 'orange', // 线颜色
        strokeOpacity: 0.8, // 线透明度
        strokeWeight: 6 // 线宽
        // strokeStyle: "solid"  // 线样式
      })
      // 添加点标记  添加终点
      // 添加起点
      // 创建一个 Icon
      var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(135, 40),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(-7, -3)
      })
      // 将 icon 传入 marker
      var startMarker = new AMap.Marker({
        position: new AMap.LngLat(lineArr[0].lng, lineArr[0].lat),
        icon: startIcon,
        offset: new AMap.Pixel(-13, -30)
      })
      // 终点
      // 创建一个 icon
      var endIcon = new AMap.Icon({
        size: new AMap.Size(25, 34),
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-95, -3)
      })
      // 将 icon 传入 marker
      var endMarker = new AMap.Marker({
        position: new AMap.LngLat(lineArr[lineArr.length - 1].lng, lineArr[lineArr.length - 1].lat),
        icon: endIcon,
        offset: new AMap.Pixel(-13, -30)
      })

      that.map.add([startMarker, polyline, endMarker])
      that.map.setFitView() // 根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别，参数均可缺省。
      // if (!graspRoad) {
      //   graspRoad = new AMap.GraspRoad()
      // }
      // graspRoad.driving(pathParam, function (error, result) {
      //   if (!error) {
      //     // var path2 = []
      //     // var newPath = result.data.points
      //     // for (var i = 0; i < newPath.length; i += 1) {
      //     //   path2.push([newPath[i].x, newPath[i].y])
      //     // }
      //     // var newLine = new AMap.Polyline({
      //     //   path: path2,
      //     //   strokeWeight: 8,
      //     //   strokeOpacity: 0.8,
      //     //   strokeColor: '#0091ea',
      //     //   showDir: true,
      //     // })
      //     // map.add(newLine)
      //     // map.setFitView()
      //     var polyline = new AMap.Polyline({
      //       path: lineArr,
      //       showDir: true,
      //       // strokeColor: '#28F', // 线颜色
      //       strokeColor: 'orange', // 线颜色
      //       strokeOpacity: 0.8, // 线透明度
      //       strokeWeight: 6, // 线宽
      //       // strokeStyle: "solid"  // 线样式
      //       showDir: true,
      //     })
      //     that.map.add([startMarker, polyline, endMarker])
      //     that.map.setFitView() // 根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别，参数均可缺省。
      //   }
      // })
    },
    // 获取用户轨迹
    async getLocus() {
      const params = new URLSearchParams()
      params.append('userId', this.selectedUser.serialNo)
      params.append('page', this.pageIndex)
      params.append('size', 9000)
      if (this.searchForm.dataTime) {
        params.append('startDate', `${this.searchForm.dataTime[0]} 00:00:00`)
        params.append('endDate', `${this.searchForm.dataTime[1]} 23:59:59`)
      }
      const { data: res } = await this.$http.post('record/userTrack/find', params)
      switch (res.code) {
        case '0000':
          if (this.pageIndex > 0) {
            // this.pageIndex++
            // console.log(this.pageIndex)
            // this.getLocus()
          } else {
            console.log('没有了')
          }
          var lineArr = []
          res.data.list.forEach((item) => {
            lineArr.push([item.longitude, item.latitude])
          })
          this.initAMap(lineArr)
          break
        case '0013':
          console.log('0013')
          this.pageIndex = 0
          this.$message.warning(res.message)
          break
        default:
          console.log(res.message)
          this.pageIndex = 0
          this.$message.error(res.message)
          break
      }
    }
  },
  destroyed() {
    this.map.destroy() // 注销地图对象,清空地图容器
  }
}
</script>
<style lang="scss" scoped>
// 搜索条件
.userSearch {
  align-content: center;
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  color: #000;
  font-size: 16px;
  z-index: 99;
  .el-select {
    width: 200px;
  }
}
::v-deep .anchorBL {
  display: none;
}
::v-deep .name {
  padding: 10px 0 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
::v-deep .bubble {
  width: 50px;
  height: 50px;
  padding: 0 5px;
  box-sizing: border-box;
  line-height: 1;
  display: inline-block;
  position: absolute;
  border-radius: 100%;
  background-color: pink;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.8);
  text-align: center;
  cursor: pointer;
}
::v-deep div.info-top {
  background-color: #fff;
  border-bottom: none;
}
::v-deep .amap-info-content {
  border: 1px solid #e4e7ed;
  box-shadow: 0px 2px 12px 0px rgb(0 0 0 / 20%);
  padding: 20px 30px 20px 20px;
  position: relative;
  width: 460px;
  box-sizing: border-box;
  div {
    position: relative;
    // font-weight: 400;
    color: #333333;
    font-size: 12px;
    height: auto;
    line-height: 20px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
    word-break: break-all; // 允许在单词换行
    span {
      &:first-child {
        position: absolute;
        left: 0;
        display: inline-block;
        width: 60px;
        text-align: right;
        color: #7a7a7a;
      }
    }
    .iconfont {
      width: 16px;
      height: 14px;
      transform: translate(-3px, 2px);
    }
  }
}
// 弹窗关闭按钮
::v-deep .amap-info-close {
  font-size: 20px !important;
  top: 15px;
  right: 15px !important;
}
// 三角形
::v-deep .amap-info-sharp {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
  margin-top: 0px;
  margin-left: 50%;
  transform: translateX(-50%);
  background-image: none;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
}
</style>
